import Vue from 'vue'
import Router from 'vue-router'
import { getToken } from '@/utils/auth'

import Login from '@/views/Login' // 加载 @是指src目录  登录路由表
import Layout from '@/views/Layout' // 公共样式组件
import Home from '@/views/Home' // 公共样式组件
import UserList from '@/views/User'
import RightsList from '@/views/Rights'
import RolesList from '@/views/Roles'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login }, // 配置路由规则  展示到 App。vue 的router-view
    {
      path: '/', // Layout 显示到 App.vue 的router-view 中
      component: Layout,
      children: [ // 嵌套路由
      // 展示 /home的时候，先展示父路由试图，然后子路由视图展示到父路由的 router-view 出口中
        { path: '', component: Home }, // 请求父路由的时候，默认渲染path 为空的这个子路由
        { path: '/users', component: UserList },
        { path: '/rights', component: RightsList },
        { path: '/roles', component: RolesList }
      ]
    }
  ]
})

/**
 * to 去哪儿
 * from 来自哪里
 * next 放行规则
 */
router.beforeEach((to, from, next) => {
  console.log('1.先进入路由导航，校验是否有token')

  // 在这里制定路由导航的业务逻辑（规则）

  // if 路径是 /login，则直接允许通过
  if (to.path === '/login') {
    return next()
  }
  // 否则校验登录状态
  // const token = window.localStorage.getItem('token')
  const token = getToken()

  // if 没有登录，跳转到登录页
  if (!token) {
    return next('/login')
  }

  // 如果有 token 则校验 token 的有效性
  // token 是服务器签发的生成的，客户端没有办法校验它的有效性
  // 所以最好有一个接口 能处理这个需求，但是我们没有这样单独的接口，我们也不需要

  // if 登录了，允许通过
  next()
})

export default router
